<template>
  <div class="spot-detail-page" v-if="spot">
    <div class="spot-header">
      <img :src="spot.image" :alt="spot.name" class="spot-image">
      <div class="spot-header-info">
        <h1>{{ spot.name }}</h1>
        <p class="address">{{ spot.address }}</p>
        <div class="rating">评分: {{ spot.rating }} / 5</div>
      </div>
    </div>
    <div class="spot-body">
      <h2>景点介绍</h2>
      <p>{{ spot.description }}</p>
      <h2>开放信息</h2>
      <p><strong>开放时间:</strong> {{ spot.openingTime }}</p>
      <p><strong>门票价格:</strong> {{ spot.price }}</p>
      <h2>游客评论</h2>
      <div class="comments-section">
        <div v-if="spot.comments.length > 0" class="comments-list">
          <div v-for="(comment, index) in spot.comments" :key="index" class="comment">
            <strong>{{ comment.user }}:</strong>
            <p>{{ comment.content }}</p>
          </div>
        </div>
        <p v-else>暂无评论。</p>
      </div>
    </div>
  </div>
  <div v-else>
    <p>正在加载景点信息...</p>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';

export default {
  name: 'ScenicSpot',
  props: ['id'],
  computed: {
    ...mapGetters('spot', { spot: 'spotDetails' })
  },
  methods: {
    ...mapActions('spot', ['fetchSpotDetails'])
  },
  created() {
    this.fetchSpotDetails(this.id);
  }
}
</script>

<style scoped>
.spot-detail-page {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  background: #f6fffa;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(66, 185, 131, 0.08);
  border: 1px solid #b2e5d6;
}
.spot-header {
  display: flex;
  margin-bottom: 20px;
}
.spot-image {
  width: 300px;
  height: 200px;
  object-fit: cover;
  border-radius: 8px;
  margin-right: 20px;
  border: 1px solid #b2e5d6;
}
.spot-header-info h1 {
  margin: 0;
  color: #2ca06c;
}
.address {
  color: #42b983;
}
.rating {
  font-weight: bold;
  color: #2ca06c;
  margin-top: 10px;
}
.spot-body h2 {
  border-bottom: 2px solid #b2e5d6;
  padding-bottom: 10px;
  margin-top: 20px;
  margin-bottom: 10px;
  color: #42b983;
}
.comments-section .comment {
  border-bottom: 1px solid #b2e5d6;
  padding: 10px 0;
}
.comments-section .comment:last-child {
  border-bottom: none;
}
</style> 